<template>
  <GoogleAdCollect
    id="8680750425"
    adm-id="div-gpt-ad-1747194220237-0"
    name="APK_Main_Display_1"
    parent-page="Home"
    @adSuccess="handleAdSuccess"
    @adError="handleAdError"
  />


  <!-- 投放位 -->
  <div class="aid-to-download">
    <AidApp />
  </div>

  <section>
    <div class="title">
      <div class="type-name">❤️ Top Download Apps</div>
      <a :href="getSeeallUrl('apps', 'top_downloads', 'Top Download Apps')" class="see-all">See all <el-icon><ArrowRight /></el-icon></a>
    </div>
    <div class="apps">
      <a :href="topDownloadUrls.get(app.name)" class="app-item" v-for="app in topDownloadData" :key="app.name" @click="handleClickApp('Top Download Apps', app)">
        <img :src="app.icon" :alt="app.name">
        <div class="app-info">
          <div class="app-name">{{ app.name }}</div>
          <div class="app-category">{{ app.category }}</div>
          <div class="app-rating">
            {{ app.rating }}
            <div class="icon">★</div>
          </div>
        </div>
        <div class="get">GET</div>
      </a>
    </div>
  </section>

  <GoogleAdCollect
    id="4741505410"
    adm-id="div-gpt-ad-1747194278520-0"
    name="APK_Main_Display_2"
    parent-page="Home"
    @adSuccess="handleAdSuccess"
    @adError="handleAdError"
  />

  <section>
    <div class="title">
      <div class="type-name">🔥 Top Free Apps</div>
      <a :href="getSeeallUrl('apps', 'top_free_apps', 'Top Free Apps')" class="see-all">See all <el-icon><ArrowRight /></el-icon></a>
    </div>
    <div class="apps">
      <a :href="topFreeAppUrls.get(app.name)" class="app-item" v-for="app in topFreeApps.slice(0, 12)" :key="app.name" @click="handleClickApp('Top Free Apps', app)">
        <img :src="app.icon" :alt="app.name">
        <div class="app-info">
          <div class="app-name">{{ app.name }}</div>
          <div class="app-category">{{ app.category }}</div>
          <div class="app-rating">
            {{ app.rating }}
            <div class="icon">★</div>
          </div>
        </div>
        <div class="get">GET</div>
      </a>
    </div>
  </section>

  <section>
    <div class="title">
      <div class="type-name">🔥 Top Free Games</div>
      <a :href="getSeeallUrl('games', 'top_free_games', 'Top Free Games')" class="see-all">See all <el-icon><ArrowRight /></el-icon></a>
    </div>
    <div class="apps">
      <a :href="topFreeGameUrls.get(app.name)" class="app-item" v-for="app in topFreeGames.slice(0, 12)" :key="app.name" @click="handleClickApp('Top Free Games', app)">
        <img :src="app.icon" :alt="app.name">
        <div class="app-info">
          <div class="app-name">{{ app.name }}</div>
          <div class="app-category">{{ app.category }}</div>
          <div class="app-rating">
            {{ app.rating }}
            <div class="icon">★</div>
          </div>
        </div>
        <div class="get">GET</div>
      </a>
    </div>
  </section>

  <GoogleAdCollect
    id="9802260409"
    adm-id="div-gpt-ad-1747194570110-0"
    name="APK_Main_Display_3"
    parent-page="Home"
    @adSuccess="handleAdSuccess"
    @adError="handleAdError"
  />
  <section>
    <div class="title">
      <div class="type-name">🏃‍♂️ Popular Sports Apps</div>
      <a :href="getSeeallUrl('apps', 'sports', 'Popular Sports Apps')" class="see-all">See all <el-icon><ArrowRight /></el-icon></a>
    </div>
    <div class="apps">
      <a :href="sportsUrls.get(app.name)" class="app-item" v-for="app in sportsData.slice(0, 12)" :key="app.name" @click="handleClickApp('Popular Sports Apps', app)">
        <img :src="app.icon" :alt="app.name">
        <div class="app-info">
          <div class="app-name">{{ app.name }}</div>
          <div class="app-category">{{ app.category }}</div>
          <div class="app-rating">
            {{ app.rating }}
            <div class="icon">★</div>
          </div>
        </div>
        <div class="get">GET</div>
      </a>
    </div>
  </section>

  <section>
    <div class="title">
      <div class="type-name">🥊 Popular Action Apps</div>
      <a :href="getSeeallUrl('apps', 'action', 'Popular Action Apps')" class="see-all">See all <el-icon><ArrowRight /></el-icon></a>
    </div>
    <div class="apps">
      <a :href="actionUrls.get(app.name)" class="app-item" v-for="app in actionData.slice(0, 12)" :key="app.name" @click="handleClickApp('Popular Action Apps', app)">
        <img :src="app.icon" :alt="app.name">
        <div class="app-info">
          <div class="app-name">{{ app.name }}</div>
          <div class="app-category">{{ app.category }}</div>
          <div class="app-rating">
            {{ app.rating }}
            <div class="icon">★</div>
          </div>
        </div>
        <div class="get">GET</div>
      </a>
    </div>
  </section>

  <GoogleAdCollect
    id="9610688714"
    adm-id="div-gpt-ad-1747194736569-0"
    name="APK_Main_Display_4"
    parent-page="Home"
    @adSuccess="handleAdSuccess"
    @adError="handleAdError"
  />
  <section>
    <div class="title">
      <div class="type-name">🏰 Popular Adventure Apps</div>
      <a :href="getSeeallUrl('apps', 'adventure', 'Popular Adventure Apps')" class="see-all">See all <el-icon><ArrowRight /></el-icon></a>
    </div>
    <div class="apps">
      <a :href="adventureUrls.get(app.name)" class="app-item" v-for="app in adventureData.slice(0, 12)" :key="app.name" @click="handleClickApp('Popular Adventure Apps', app)">
        <img :src="app.icon" :alt="app.name">
        <div class="app-info">
          <div class="app-name">{{ app.name }}</div>
          <div class="app-category">{{ app.category }}</div>
          <div class="app-rating">
            {{ app.rating }}
            <div class="icon">★</div>
          </div>
        </div>
        <div class="get">GET</div>
      </a>
    </div>
  </section>

  <section>
    <div class="title">
      <div class="type-name">💄 Popular Beauty Apps</div>
      <a :href="getSeeallUrl('apps', 'beauty', 'Popular Beauty Apps')" class="see-all">See all <el-icon><ArrowRight /></el-icon></a>
    </div>
    <div class="apps">
      <a :href="beautyUrls.get(app.name)" class="app-item" v-for="app in beautyData.slice(0, 12)" :key="app.name" @click="handleClickApp('Popular Beauty Apps', app)">
        <img :src="app.icon" :alt="app.name">
        <div class="app-info">
          <div class="app-name">{{ app.name }}</div>
          <div class="app-category">{{ app.category }}</div>
          <div class="app-rating">
            {{ app.rating }}
            <div class="icon">★</div>
          </div>
        </div>
        <div class="get">GET</div>
      </a>
    </div>
  </section>
  <!-- 7个section -->
</template>

<script setup>
import GoogleAdCollect from '@/components/GoogleAdCollect.vue'
import AidApp from '@/components/AidApp.vue'
import { ref, onMounted } from 'vue'
import topDownloadData from '~/assets/data/top/top_downloads.json'
import topFreeApps from '~/assets/data/top/top_free_apps.json'
import topFreeGames from '~/assets/data/top/top_free_games.json'
import sportsData from '~/public/data/apps/sports.json'
import actionData from '~/public/data/apps/action.json'
import adventureData from '~/public/data/apps/adventure.json'
import beautyData from '~/public/data/apps/beauty.json'
import { homeParams } from '~/utils/homeParams'

definePageMeta({
  title: '首页',
  layout: 'default'
})

// 为每个数据集创建 URL Map
const topDownloadUrls = ref(new Map())
const topFreeAppUrls = ref(new Map())
const topFreeGameUrls = ref(new Map())
const sportsUrls = ref(new Map())
const actionUrls = ref(new Map())
const adventureUrls = ref(new Map())
const beautyUrls = ref(new Map())
const seeAllUrl = ref('')

const getDetailUrl = (item) => {
  const queryParams = {
    type: 'apps',
    slug: item.slug,
    ...homeParams()
  }
  
  return `/details?${new URLSearchParams(queryParams).toString()}`
}

const getSeeallUrl = (type, slug, name) => {
  const queryParams = {
    type: type,
    name: encodeURIComponent(name),
    ...homeParams()
  }
  return `/categories/${slug}?${new URLSearchParams(queryParams).toString()}`
}

// 在组件挂载后生成所有 URL
onMounted(() => {
  logEvent('Home_Page_Show')

  // 生成 See all URL
  seeAllUrl.value = getSeeallUrl('apps', 'top-downloads', 'Top Download Apps')

  // 生成 Top Download Apps URLs
  topDownloadData.forEach(app => {
    topDownloadUrls.value.set(app.name, getDetailUrl(app))
  })

  // 生成 Top Free Apps URLs
  topFreeApps.slice(0, 12).forEach(app => {
    topFreeAppUrls.value.set(app.name, getDetailUrl(app))
  })

  // 生成 Top Free Games URLs
  topFreeGames.slice(0, 12).forEach(app => {
    topFreeGameUrls.value.set(app.name, getDetailUrl(app))
  })

  // 生成 Sports Apps URLs
  sportsData.slice(0, 12).forEach(app => {
    sportsUrls.value.set(app.name, getDetailUrl(app))
  })

  // 生成 Action Apps URLs
  actionData.slice(0, 12).forEach(app => {
    actionUrls.value.set(app.name, getDetailUrl(app))
  })

  // 生成 Adventure Apps URLs
  adventureData.slice(0, 12).forEach(app => {
    adventureUrls.value.set(app.name, getDetailUrl(app))
  })

  // 生成 Beauty Apps URLs
  beautyData.slice(0, 12).forEach(app => {
    beautyUrls.value.set(app.name, getDetailUrl(app))
  })
})

const handleClickApp = (type, item) => {
  logEvent('Click_APP', {
    Subzone: type,
    App: item.name,
  })
}

const handleAdSuccess = () => {
  console.log('广告加载成功')
}
const handleAdError = () => {
  console.log('广告加载失败')
}
</script>

<style scoped lang="scss">
section {
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1rem 0;
    .type-name {
      @include title;
    }
    .see-all {
      font-family: googlesans,Arial,sans-serif,serif;
      font-size: 14px;
      display: flex;
      align-items: center;
      color: #555;
      cursor: pointer;
      text-decoration: none;
    }
  }

  .apps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 1rem;
    overflow: auto;

    .app-item {
      text-decoration: none;
      color: inherit;
      display: flex;
      gap: 1rem;
      padding: 0.5rem;
      border-radius: 0.5rem;
      transition: all 0.3s ease;
      align-items: center;
      cursor: pointer;

      &:hover {
        background-color: #f5f5f5;
      }

      img {
        width: 4rem;
        height: 4rem;
        border-radius: 1rem;
        object-fit: cover;
        background-image: url('/img/default.png');
        background-size: 4rem 4rem;
        background-position: center;
      }

      .app-info {
        display: flex;
        flex-direction: column;
        gap: .1rem;

        .app-name {
          font-size: 0.9rem;
          margin-bottom: 0.25rem;
          font-weight: 500;
          overflow: hidden;
          width: 9rem;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .app-category {
          font-size: .7rem;
          color: #666666;
        }
        .app-rating {
          display: flex;
          align-items: center;
          font-size: 0.8rem;
          color: #F75867;

          .icon {
            color: #666;
            margin-left: 0.25rem;
          }
        }
      }
      .get {
        display: none;
      }
      @media screen and (max-width: 768px) {
        .get {
          display: block;
          border-radius: 1rem;
          border: 1px solid #F78B17;
          color: #F78B17;
          padding: 0.2rem 1.2rem;
        }
      }
    }
  }
}
</style>